<template>
    <div class="app-container">
        <div class="customContainer">
            <div class="store">
                <el-form size="small" :inline="true">
                    <el-form-item>
                        <el-select
                                placeholder="选择门店"
                                v-model="formInline.store_id"
                                @change="StoreDate"
                                style="width:300px"
                                filterable>
                            <el-option
                                    v-for="item in store_list"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <div class="pull-right">
                        <template v-if="!modification">
                            <el-button type="primary" size="small" @click="batch">修改</el-button>
                            <el-button type="primary" size="small" @click="batchModifying">批量修改</el-button>
                        </template>
                        <template v-else>
                            <el-button type="primary" @click="saveDate" size="small">保存</el-button>
                            <el-button type="primary" size="small" @click="cancel">取消</el-button>
                        </template>
                        <el-button  type="primary" size="small" @click="goPage">积分方案管理</el-button>
                    </div>
                </el-form>
            </div>
            <div class="mainA">
                <div class="left">
                    <div class="left_top">
                        <div class="flex header">
                            <div style="width: 100px;display: flex;justify-content: space-between">
                                <span class="el-icon-d-arrow-left icon" @click="addYear(1)"></span>
                                <span class="icon el-icon-arrow-left" @click="addMonth(1)"></span>
                            </div>
                            <span>{{atYear}}年{{atMonth}}月</span>
                            <div style="width: 100px;display: flex;justify-content: space-between">
                                <span class="el-icon-arrow-right icon" @click="addMonth(2)"></span>
                                <span class="el-icon-d-arrow-right icon" @click="addYear(2)"></span>
                            </div>
                        </div>
                        <div class="table">
                            <div class="table_top" v-for="(item, index) in StoreYearInfo" :key="index">
                                <div class="week">
                                    <span>{{item.week}}</span>
                                </div>
                                <div v-for="(itam, i) in item.data" :key="i" class="date"
                                     :class="[
                                         !modification && (RightDate.atYear == itam.atYear && RightDate.atMonth == itam.atMonth && RightDate.atDate == itam.atDate)?'click':'',
                                         batchStatus && ( formInline.ruleDate == (itam.atYear+'年'+itam.atMonth+'月'+itam.atDate+'日'))?'click':'',
                                         !modification && (thatYear == itam.atYear && thatMonth == itam.atMonth && thatDate == itam.atDate)?'thatColor':'',
                                         modification && (thatYear > itam.atYear ||
                                         (thatYear == itam.atYear && thatMonth > itam.atMonth ) ||
                                         (thatYear == itam.atYear && thatMonth == itam.atMonth && thatDate >= itam.atDate))?'forbid':'',
                                         !itam.atYear?'forbid':'',
                                         thatYear > itam.atYear ||
                                         (thatYear == itam.atYear && thatMonth > itam.atMonth ) ||
                                         (thatYear == itam.atYear && thatMonth == itam.atMonth && thatDate >= itam.atDate)  ?'ccc':'']"
                                     @click="select(itam)">
                                    <el-checkbox-group v-model="formInline.monthCheck">
                                        <el-checkbox  v-show="batchModifyingStatus && configuration_id== 2 && itam.atYear"
                                                      class="checkbox" :label="itam.time"
                                                     :disabled="batchModifyingStatus &&(thatYear >= itam.atYear && thatMonth >= itam.atMonth && thatDate >= itam.atDate)">
                                            <em></em></el-checkbox>
                                    </el-checkbox-group>
                                    <div class="atDate" v-if="itam.time">{{itam.atDate}}</div>
                                    <span :style="{background:itam.color}" class="back"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--            右侧部分-->
                <div class="right">
                    <div v-show="!batchModifyingStatus">
                        <div style="margin-bottom: 20px;">积分规则</div>
                        <div style="margin-bottom: 20px;">
                            <span>日期：</span>
                            <template v-if="!modification">
                                <span style="margin-left: 20px;">{{RightDate.atYear}}年{{RightDate.atMonth}}月{{RightDate.atDate}}日</span>
                            </template>
                            <template v-else>
                                <span style="margin-left: 20px;">{{formInline.ruleDate}}</span>
                            </template>
                        </div>
                    </div>
                    <div class="batchModifyingStatus" v-show="batchModifyingStatus">
                        <div style="margin-bottom: 20px;font-size: 16px;font-weight: bold;">配置方式</div>
                        <div class="slect" style="margin-bottom: 20px">
                            <el-select
                                    placeholder="配置方式"
                                    v-model="configuration_id"
                                    style="width:300px"
                                    filterable>
                                <el-option
                                        v-for="item in configuration_list"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"
                                ></el-option>
                            </el-select>
                        </div>
                        <div style="margin-bottom: 20px;font-size: 16px;font-weight: bold;">选择日期</div>
                        <div v-show="configuration_id==1">
                            <el-date-picker style="width:240px" v-model="pickerDate" value-format="yyyy-MM-dd" type="daterange" align="right" unlink-panels range-separator="-"
                                            :clearable="false" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
                            <div style="margin: 15px 0">
                                <el-checkbox-group v-model="weeksList">
                                    <el-checkbox v-for="(item,index) in weeks" :key="index" :label="item"></el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </div>
                        <div style="margin-bottom: 20px" class="selectList" v-show="configuration_id==2">
                            <div v-for="(item,index) in formInline.monthCheck" :key="index">
                                <span>{{item}}</span>
                                <span class="el-icon-close" @click="deleteMonthCheck(item)"></span>
                            </div>
                        </div>
                    </div>
                    <div style="margin-bottom: 20px;display: flex">
                        <span style="font-size: 16px;font-weight: bold;">当前选择方案： </span>
                        {{signName?signName:'未配置'}}
                        <span :style="{background:signColor}" class="border"></span>
                    </div>
                    <el-table highlight-current-row :data="signList" border size="mini" v-loading.body="signListLoading">
                        <el-table-column align="center" label='序号' width="50">
                            <template slot-scope="scope">{{scope.$index+1+(currentPage-1)*20}}</template>
                        </el-table-column>
                        <el-table-column align="center" label="卡类型" prop="type_name"></el-table-column>
                        <el-table-column align="center" label="规则" prop="rule"></el-table-column>
                    </el-table>
                    <div v-show="batchStatus || batchModifyingStatus">
                        <div style="margin-top: 15px">选择方案：</div>
                        <el-form size="small" style="margin-top: 10px">
                            <el-form-item>
                                <el-date-picker style="width:240px" v-model="pickerDate1" value-format="yyyy-MM-dd" type="daterange" align="right" unlink-panels range-separator="-"
                                                :clearable="false" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions1"></el-date-picker>
                                <el-input type="text" v-model="formInline.name" placeholder="请输入方案名称" style="width: 200px;margin:0 10px"></el-input>
                                <el-button  @click="signlist" type="primary" size="small">搜索</el-button>
                            </el-form-item>
                        </el-form>
                        <el-table highlight-current-row :data="list" border size="mini" v-loading.body="listLoading" max-height="320px">
                            <el-table-column align="center" label='序号' width="50">
                                <template slot-scope="scope">{{scope.$index+1+(currentPage-1)*20}}</template>
                            </el-table-column>
                            <el-table-column align="center" label="标记色" prop="name" width="120px">
                                <template slot-scope="scope">
                                    <div style="width: 100px;height: 25px;" :style="{background:scope.row.color}"></div>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="方案名称" prop="name"></el-table-column>
                            <el-table-column align="center" label="操作" width="200px">
                                <template slot-scope="scope">
                                    <el-button @click="selectSign(scope.row)" type="primary" plain size="mini">选择</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="bottom_box">
                            <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="20"
                                           layout="prev, pager, next, jumper" :total="totalDataNumber">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        getStore,
        getInfo,
        storeConfigPlan,
        storeConfigInfo,
        signDetails,
        getInfoPage
    } from "@/api/operation/integral_rule";

    import {
        pickerOptionsSixMonth,
        pickerOptionsSixMonthX,
        pickerDateOneMonth
    } from "@/utils";

    export default {
        name: "integral_rule",
        data(){
            return{
                list: null,  //方案数据
                signList:[],
                oldsignList:[],
                oldsignName:"",
                oldsignColor:"",
                tableList:null,
                StoreYearInfo:null,
                thatYear:"",//当前年份
                thatMonth:"",//当前月份
                thatDate:"",
                atYear:"", //表格年份
                atMonth:"",
                atDate:"",
                modification:false,  //是否为修改状态
                listLoading: false,  //表格换场动画
                signListLoading: false,  //表格换场动画
                batchStatus:false, //单独修改
                batchModifyingStatus:false, //批量修改
                store_list:[],
                currentPage: 1,
                totalDataNumber: 0,
                RightDate:null,
                monthCheckList:[],  //当前展示的月份
                plan_id:"", //方案id
                planId:"",
                signName:"",    //方案名称
                signColor:"",
                selectPlanId:"",  //选择的方案id
                formInline:{
                    store_id:"",
                    ruleDate:"", //单独修改的日期
                    status:"1", //查找方案状态 （启用）
                    name:"",  //查找方案名字
                    monthCheck:[] //修改选中的月份
                },
                configuration_id:'1',
                configuration_list:[{id:'1', name:"按时间范围"},{id:'2', name:"按指定时间"}],
                pickerOptions: pickerOptionsSixMonthX(),
                pickerDate: "",
                pickerOptions1: pickerOptionsSixMonth(),
                pickerDate1: pickerDateOneMonth(),
                weeksList:[],
                weeks : [ "周一", "周二", "周三", "周四", "周五", "周六","周日"]
            }
        },
        created() {
            const myDate = new Date();
            this.thatYear = myDate.getFullYear();
            this.thatMonth = myDate.getMonth()+1;
            this.thatDate = myDate.getDate();

            this.atYear = this.thatYear; //设置表格的年份
            this.atMonth = this.thatMonth; //设置表格的年份
            this.atDate = this.thatDate; //设置表格的年份

            this.RightDate = {
                atYear:this.atYear,
                atMonth:this.atMonth,
                atDate:this.atDate,
            }  //默认右侧年份
            this.getstore();
        },
        methods:{
            StoreDate(){
                this.planId = 2;
                this.plan_id = "";
                this.signList = [];
                this.signName = "";
                this.signColor = "";
                this.batchStatus = false;
                this.modification = false;
                this.formInline.ruleDate = "";
                this.atYear = this.RightDate.atYear;
                this.atMonth = this.RightDate.atMonth;
                this.batchModifyingStatus = false;
                this.storeInfo();
            },
            getstore() {
                getStore({ category_id: 716 }).then((response) => {
                    this.store_list = response;
                    let data = response.filter(
                        res => res.id == this.$store.getters.optionId
                    );
                    if (data.length > 0) {
                        this.formInline.store_id = data[0].id;
                    }
                }).then(()=>{
                    this.storeInfo();
                });
            },
            addYear(index){
                if(index==1){
                    this.atYear--
                }else{
                    this.atYear++
                }
                this.storeInfo();
            },
            addMonth(index){
                if(index==1){
                    if(this.atMonth == '1'){
                        this.atYear --
                        this.atMonth = '12';
                    }else{
                        this.atMonth--
                    }
                }else{
                    if(this.atMonth == '12'){
                        this.atYear ++
                        this.atMonth = '1';
                    }else{
                        this.atMonth++
                    }
                }
                this.storeInfo();
            },
            batchModifying(){  //批量修改
                this.clearDate();
                this.batchModifyingStatus = true;
                this.batchStatus = false;
            },
            batch(){ //单独修改
                this.clearDate();
                this.batchModifyingStatus = false;
                this.batchStatus = true;
            },
            clearDate(){
                this.oldsignList = this.signList;  //保存当前方案数据
                this.oldsignName = this.signName;//保存当前方案名称
                this.oldsignColor = this.signColor;//保存当前方案名称
                this.signList = []; //清空表格数据
                this.signName = ""; //清空方案名称
                this.signColor = "";
                this.formInline.clearDate = "";
                this.formInline.monthCheck = []; //清空选择修改的月份
                this.formInline.ruleDate = ""; // 清除选中年月日
                this.modification = true;  //是否为修改状态
                this.weeksList = [];
                this.pickerDate = "";
                this.signlist(); // 获取方案数据
            },
            select(item){
                if(item.atYear){
                    if(this.batchStatus || this.batchModifyingStatus){
                        if(this.thatYear < item.atYear||
                            this.thatYear <= item.atYear && this.thatMonth < item.atMonth||
                            this.thatYear <= item.atYear && this.thatMonth <= item.atMonth && this.thatDate < item.atDate ){
                            if(this.batchStatus){     //单独修改
                                this.formInline.ruleDate=`${item.atYear}年${item.atMonth}月${item.atDate}日`;
                                this.$set(this.formInline.monthCheck,0,item.time);
                            }
                            if(this.batchModifyingStatus && this.configuration_id==2){  //批量修改
                                if(this.formInline.monthCheck.includes(item)){
                                    this.formInline.monthCheck.splice(this.formInline.monthCheck.findIndex(itam => itam === item), 1);
                                }else{
                                    // console.log(item)
                                    this.formInline.monthCheck.push(item.time);
                                    // console.log(this.formInline.monthCheck);
                                    this.formInline.monthCheck.sort(function (a,b) {
                                        return a.time>b.time?1:-1;
                                    })
                                }
                            }
                        }else{
                            this.$message.error("当前选择的年月不可进行修改");
                            //阻止点击多选框，选择成功
                            const array = this.formInline.monthCheck.findIndex(itam => itam === item);
                            if(this.batchModifyingStatus && array != -1){  //点击多选框的时候触发
                                this.formInline.monthCheck.splice(this.formInline.monthCheck.findIndex(itam => itam === item), 1);
                            }
                        }
                    }else{
                        // 查看详情
                        this.signList = [];
                        this.signName = "";
                        this.signColor = "";
                        this.plan_id = item.rules_id; //获取当月的plan_id
                        this.RightDate = {
                            atYear: this.atYear,
                            atMonth: this.atMonth,
                            atDate:item.atDate,
                        }
                        this.signDetail(); //获取方案详情
                    }
                }
            },
            cancel(){ //取消
                this.signList = [];
                this.batchModifyingStatus=false;
                this.modification=false;
                this.batchStatus=false;
                this.signDetail();
            },
            selectSign(row){ //选择
                this.signListLoading = true;
                signDetails({id:row.id}).then(res=>{
                    if(res.code==1 && res.data.length!=0){
                        this.selectPlanId = row.id;
                        this.signName = row.name;
                        this.signList = res.data;
                        this.signColor = res.data[0].color;
                        this.signList.forEach(value => {
                            value.rule =`消费${value.limit}${value.type==0?'币':value.type=='1'?'次':'星'}得${value.score}积分`
                        })
                        this.signListLoading = false;
                    }else{
                        this.signListLoading = false;
                    }
                })
            },
            getdiffdate(stime,etime){
                //初始化日期列表，数组
                var diffdate = new Array();
                var i=0;
                //开始日期小于等于结束日期,并循环
                while(stime<=etime){
                    diffdate[i] = stime;

                    //获取开始日期时间戳
                    var stime_ts = new Date(stime).getTime();
                    //增加一天时间戳后的日期
                    var next_date = stime_ts + (24*60*60*1000);
                    //拼接年月日，这里的月份会返回（0-11），所以要+1
                    var next_dates_y = new Date(next_date).getFullYear()+'-';
                    var next_dates_m = (new Date(next_date).getMonth()+1 < 10)?'0'+(new Date(next_date).getMonth()+1)+'-':(new Date(next_date).getMonth()+1)+'-';
                    var next_dates_d = (new Date(next_date).getDate() < 10)?'0'+new Date(next_date).getDate():new Date(next_date).getDate();
                    stime = next_dates_y+next_dates_m+next_dates_d;
                    //增加数组key
                    i++;
                }
                return diffdate
            },
            saveDate(){ //保存
                if(this.batchStatus){
                    if(!this.formInline.ruleDate){
                        this.$message.error("请选择要修改的日期");
                        return
                    }
                    if(this.signList.length<=0){
                        this.$message.error("请选择当前要修改的方案");
                        return
                    }
                }

                if(this.batchModifyingStatus){
                    if(this.configuration_id!=1){
                        if(this.formInline.monthCheck.length<=0){
                            this.$message.error("请选择要修改的月份");
                            return
                        }
                        if(this.signList.length<=0){
                            this.$message.error("请选择当前要修改的方案");
                            return
                        }
                    }else{
                        if(!this.pickerDate || this.weeksList.length<=0){
                            this.$message.error("请选择要修改的日期");
                            return
                        }
                        if(this.signList.length<=0){
                            this.$message.error("请选择当前要修改的方案");
                            return
                        }
                        let timeList = this.getdiffdate(this.pickerDate[0],this.pickerDate[1]);
                        let weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
                        for(let i=0;i<=timeList.length;i++){
                            if(this.weeksList.join('-').indexOf(weeks[new Date(timeList[i]).getDay()]) != -1){
                                this.formInline.monthCheck.push(timeList[i])
                            }
                        }
                    }
                }
                let json=[];
                for(let i=0;i<this.formInline.monthCheck.length;i++){
                    json.push({
                        time:this.formInline.monthCheck[i],
                        rules_id: this.selectPlanId
                    });
                }

                let data={
                    store_id:this.formInline.store_id,
                    json_list:json
                };

                // console.log(data)
                storeConfigPlan(data).then(res=>{
                    if(res.code==1){
                        this.$message.success(res.message);
                        this.batchModifyingStatus=false;
                        this.modification=false;
                        this.batchStatus=false;
                        this.signList = [];
                        this.planId = 2;
                        this.storeInfo();
                    }
                })
            },
            storeInfo(){ //左侧日历
                storeConfigInfo({
                    store_id:this.formInline.store_id,
                    datetime:this.atYear+"-"+this.atMonth
                }).then(res=>{
                    if(res.code==1){
                        let data = res.data;
                        let arr = [];
                        let weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];//判断当天是星期几

                        //将相同日期(年月日)的数据整理到一起
                        data.forEach((item,i) => {
                            let data=item.time.split("-");
                            arr.push({
                                time : item.time,
                                rules_id:item.rules_id,
                                color:item.color,
                                atYear:data[0],
                                atMonth:data[1],
                                atDate:data[2],
                                weeks : weeks[new Date(item.time).getDay()],//判断当天是星期几
                            })
                        });


                        //判断每月的第一天是星期几,进行补位
                        let firstDataWeek = new Date(data[0].time).getDay();
                        if(firstDataWeek == 0){
                            arr = this.getDateCoverage(7,arr,weeks,data,1);
                        }else{
                            arr = this.getDateCoverage(firstDataWeek,arr,weeks,data,1);
                        }

                        let lastDataWeek = new Date(data[data.length-1].time).getDay();
                        if(lastDataWeek == 0){
                            arr = this.getDateCoverage(7,arr,weeks,data,2);
                        }else{
                            arr = this.getDateCoverage(lastDataWeek,arr,weeks,data,2);
                        }

                        //将星期作为条件整理数据-- 如星期一的放在一个数组中
                        let dataArr = [
                            {
                                week: '周一',
                                data:[]
                            },
                            {
                                week: '周二',
                                data:[]
                            },
                            {
                                week: '周三',
                                data:[]
                            },
                            {
                                week: '周四',
                                data:[]
                            },
                            {
                                week: '周五',
                                data:[]
                            },
                            {
                                week: '周六',
                                data:[]
                            },
                            {
                                week: '周日',
                                data:[]
                            }
                        ];
                        arr.forEach(item => {
                            switch(item.weeks){
                                case '周一' :
                                    dataArr[0].data.push(item);
                                    break;
                                case '周二' :
                                    dataArr[1].data.push(item);
                                    break;
                                case '周三' :
                                    dataArr[2].data.push(item);
                                    break;
                                case '周四' :
                                    dataArr[3].data.push(item);
                                    break;
                                case '周五' :
                                    dataArr[4].data.push(item);
                                    break;
                                case '周六' :
                                    dataArr[5].data.push(item);
                                    break;
                                case '周日' :
                                    dataArr[6].data.push(item);
                                    break;
                            }
                        })
                        this.tableList = res.data;
                        this.StoreYearInfo = dataArr;
                    }
                }).then(()=>{
                    if(this.planId == ""){  //第一次默认获取当月的数据
                        try {
                            this.planId = 1;
                            let time= `${this.RightDate.atYear}-${this.RightDate.atMonth}-${this.RightDate.atDate<10?'0'+this.RightDate.atDate:this.RightDate.atDate}`;
                            this.plan_id=this.tableList.filter(item => item.time==time)[0].rules_id;
                            this.signDetail(); //获取方案详情
                        }catch (e) {
                            console.log(e)
                        }
                    }else if(this.planId == "2"){  //保存成功或者修改门店重新获取
                        this.planId = 1;
                        if(this.atYear == this.RightDate.atYear && this.atMonth == this.RightDate.atMonth){
                            let time= `${this.RightDate.atYear}-${this.RightDate.atMonth}-${this.RightDate.atDate<10?'0'+this.RightDate.atDate:this.RightDate.atDate}`;
                            this.plan_id=this.tableList.filter(item => item.time==time)[0].rules_id;
                            this.signDetail(); //获取方案详情
                        }else{
                            this.signList = this.oldsignList;
                            this.signName = this.oldsignName;
                            this.signColor = this.oldsignColor;
                        }
                    }
                })
            },
            getDateCoverage(index,arr,weeks,data,i){ //日期补位的数据 index-前几天  arr-将相同日期(年月日)的数据整理后的数据  week-星期数组 data-数据接口返回的原始数据-未对数据进行操作
                if(i==1){
                    for(let i=1; i<index; i++){
                        arr.unshift({
                            time : '',
                            rules_id:'',
                            weeks : weeks[new Date(this.getBeforeDate(data[0].time,i)).getDay()],//判断当天是星期几
                        })
                    }
                    return arr;
                }else {
                    for(let i=1; i<= (7-index); i++){
                        arr.push({
                            time : '',
                            rules_id:'',
                            weeks : weeks[new Date(this.getBeforeDate1(data[data.length-1].time,i)).getDay()],//判断当天是星期几
                        })
                    }
                    return arr;
                }
            },
            getBeforeDate(currentDay,days){ // 获取几天前的日期   currentDay-传入的起始时间  days-时间间隔几天前
                var now=new Date(currentDay).getTime();
                var ago=now-86400000*days;//一天的毫秒数为86400000
                var agoData= new Date(ago);
                var year = agoData.getFullYear();
                var mon = agoData.getMonth() + 1;
                var day = agoData.getDate();
                mon=mon<10? '0'+mon:mon;
                day=day<10? '0'+day:day;
                var date=year+'-'+mon+'-'+day;
                return date;
            },
            getBeforeDate1(currentDay,days){ // 获取几天前的日期   currentDay-传入的起始时间  days-时间间隔几天前
                var now=new Date(currentDay).getTime();
                var ago=now+86400000*days;//一天的毫秒数为86400000
                var agoData= new Date(ago);
                var year = agoData.getFullYear();
                var mon = agoData.getMonth() + 1;
                var day = agoData.getDate();
                mon=mon<10? '0'+mon:mon;
                day=day<10? '0'+day:day;
                var date=year+'-'+mon+'-'+day;
                return date;
            },
            signlist(){ //当前门店的方案列表
                this.list = [];
                this.listLoading = true;
                let data={
                    store_id:"",
                    begin_time: this.pickerDate1[0],
                    end_time: this.pickerDate1[1],
                    name:this.formInline.name,
                    status:this.formInline.status
                };
                getInfoPage(data).then(response=>{
                    this.totalDataNumber = response.data.count / 1;
                    if (this.totalDataNumber == 0) {
                        this.listLoading = false;
                    } else {
                        getInfo(data).then(res=>{
                            this.list = res.data;
                            this.listLoading = false;
                        });
                    }
                });
            },
            signDetail(){  //获取当前方案的详情
                if(this.plan_id){
                    this.signListLoading = true;
                    signDetails({id:this.plan_id}).then(res=>{
                        if(res.code==1){
                            this.signList = res.data;
                            this.signName = res.data[0].name;
                            this.signColor = res.data[0].color
                            this.signList.forEach(value => {
                                value.rule =`消费${value.limit}${value.type==0?'币':value.type=='1'?'次':'星'}得${value.score}积分`
                            })
                            this.signListLoading = false;
                        }
                    })
                }
            },
            deleteMonthCheck(item){
                this.formInline.monthCheck.splice(this.formInline.monthCheck.findIndex(itam => itam === item), 1);
            },
            handleCurrentChange(val){
                this.listLoading = true;
                let data={
                    store_id:"",
                    begin_time: "",
                    end_time: "",
                    status:this.formInline.status
                };
                getInfo(data,val).then(res=>{
                    this.list = res.data;
                    this.listLoading = false;
                }).catch(res => {
                    this.listLoading = false;
                });
            },
            goPage(){
                this.$router.push({
                    name:"operation/integral_scheme"
                });
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .customContainer {
        overflow-y: auto;
    }
    .store{
        padding: 8px 15px;
        min-width: 1040px;
    }
    .mainA{
        width: 100%;
        padding: 8px 15px;
        box-sizing: border-box;
        .left{
            float: left;
            width: 650px;
            .left_top{
                width: 630px;
                padding: 30px;
                background: white;
                .flex{
                    display: flex;
                    justify-content: space-between;
                }
                .header{
                    font-size: 18px;
                    margin-bottom: 20px;
                    .icon{
                        font-size: 24px;
                        font-weight: bold;
                    }
                    .icon:hover{
                        cursor: pointer;
                    }
                }
            }
            .table{
                width: 100%;
                display: flex;
                .table_top{
                    flex: 1;
                    .week{
                        width: 100%;
                        height: 40px;
                        text-align: center;
                        line-height: 40px;
                        border: 1px solid white;
                        background: #96CDCD;
                        border-bottom: none;
                    }
                    .date{
                        width: 100%;
                        height: 70px;
                        line-height: 70px;
                        text-align: center;
                        border: 1px solid #ccc;
                        position: relative;

                        .atDate{
                            width: 100%;
                            height: 20px;
                            position: absolute;
                        }

                        .back{
                            width: 15px;
                            height: 15px;
                            border-radius: 50%;
                            position: absolute;
                            right: 5px;
                            top: 5px;
                        }
                        .text{
                            display: block;
                            width: 100%;
                            height: 30px;
                            position: absolute;
                            top: 45%;
                        }
                        .checkbox{
                            position: absolute;
                            left: 5px;
                            top: -24px;
                        }
                    }
                    .date:hover{
                        cursor: pointer;
                    }

                }
                .table_top:nth-child(even){
                    .date{
                        border-left: none;
                        border-right: none;
                        border-top: none;
                    }
                    .date:last-child{
                        border-right: 1px solid #ccc;
                    }
                }
                .table_top:nth-child(odd){
                    .date{
                        border-top: none;
                    }
                }
            }
        }
        .right{
            overflow:hidden;
            padding: 20px;
            background: white;
            .border{
                display: block;
                width: 12px;
                height: 12px;
                border-radius: 50%;
                margin-left: 5px;
                font-size: 14px;
            }

            .selectList{
                width: 100%;
                height: 100px;
                display: flex;
                flex-wrap: wrap;
                padding: 10px;
                box-sizing: border-box;
                overflow-y: auto;
                border: 1px solid #ccc;

                div{
                    width: 125px;
                    height: 30px;
                    padding: 5px;
                    font-size: 16px;
                    border: 1px solid #ccc;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-right: 5px;

                    span:nth-child(2){
                        font-weight: bold;
                        font-size: 18px;
                        margin-left: 2px;
                    }
                }
            }
        }
    }

    div.click{
        background: #8473e7 !important;
        color: white !important;
    }
    .thatColor{
        font-weight: bold;
        background: #65d8c7 !important;
        color: white !important;
    }
    .ccc{
        background: #f5f7fa;
    }
    .forbid:hover{
        cursor:not-allowed !important;
    }
</style>